<template>
	<div class="jp">
		<!-- <h3>动漫Animation</h3> -->
		<div class="card-flex">
			<el-card
				:body-style="{ padding: '1px', marginBottom: '1px' }"
				class="card-first"
				@click.native ='gotoDetail'>
				<img src="http://i0.letvimg.com/vrs/201307/23/4996b18ff4884471842b01402ddf9d66.jpg" class="image multi-content" />
				<div style="padding: 8px;">
					<span>星际牛仔</span>
					<div class="collect" @click.stop="collect()">
						<i class="el-icon-connection icon-collect"></i>
					</div>
					<!-- <div class="bottom card-header">
						<el-rate 
							v-model="value" 
							disabled
							show-score
							text-color="#ff9900"
							score-template="{value}">
						</el-rate>
					</div>-->
				</div> 
			</el-card>
			<el-card
				:body-style="{ padding: '1px', marginBottom: '1px' }"
				v-for="item in lists"
				:key="item.id" class="card-first"
				@click.native ='gotoDetail(item.name)'>
				<img :src="item.media.coverImage.extraLarge" class="image multi-content" />
				<div style="padding: 8px;">
					<span>{{ item.media.title.native }}</span>
					<div class="collect" @click.stop="collect()">
						<i class="el-icon-connection icon-collect"></i>
					</div>
				</div> 
			</el-card>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default{
	name:'Animation',
	data(){
		return{
			lists: [],
			value: 4.8,
		}
	},
	created() {
		// this.getAnimation()
		this.getAnima()
	},
	methods: {
		gotoDetail(){
			// console.log(ele)
			this.$router.push('/animationdetail')
		},
		/* getAnimation() {
			axios.get('https://mock.mengxuegu.com/mock/613f178f686c29122640fc4d/example/animation').then(res => { 
				// console.log(res)
				this.lists = res.data.data.animation
			}).catch(function (error) { console.log(error) })
		},*/
		getAnima(){
			// login({}).then( res => {
			// 	console.log(res)
			// })
			axios.get('https://mock.mengxuegu.com/mock/613f178f686c29122640fc4d/example/comic').then(res => {
				// console.log(res.data.data.Page.airingSchedules)
				// console.log(res.data.data.Page.airingSchedules[0].id)
				// [0].id
				this.lists = res.data.data.Page.airingSchedules
			}).catch(function (error) { console.log(error) })
		},
		collect(){
			
			this.$message({
				message:'收藏成功',
				type:'true'
			});
		}
	},
}
</script>

<style scoped>
.jp{
	padding: 12vw 2vw 2vw 2vw;
	box-sizing: border-box;
}
.card-flex{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	/* padding: 0 2%; */
	box-sizing: border-box;
	font-size: 13px;
	text-align: center;
}
.card-first{
	width: 32%;
	margin-bottom: 8px;
	border-radius: 8px;
	margin-right: 1vw;
	position: relative;
}
.card-first:nth-child(3n){
	margin-right: 0;
}
.bottom {
	margin-top: 6px;
	line-height: 12px;
}
.image {
	height: 130px;
	width: 100%;
	display: block;
	border-radius: 8px 8px 0 0;
}

.collect{
	position: absolute;
	top: 2vw;
	right: 2vw;
}
.icon-collect{
	font-size: 18px;
	color: #FFFFFF;
	font-weight: bold;
}
</style>
